TIP

The modern way to change the way our elements are displayed

Understanding the Flexbox

flex Container

TIP

默认的行为

• display: flex
• flex-direction: row
• flex-wrap: nowrap;
• align-items: stretch;

Main Axis vs Cross Axis

Align items and Justify content

TIP

• justify-content: space-between 是main方向的
• align-items 是 cross方向的

Notes App 案例

项目预览（Project view）

相关笔记

flex-wrap使用

TIP

布局

body{
    display: flex;
    flex-wrap: wrap;
}

justify-content使用

TIP

编辑，删除按钮的使用

.note .tools{
    display: flex;
    justify-content: flex-end; /*flex end*/
    background-color: var(--second-color);
    padding: 0.5rem;
}

flex: 数值

flex: 1 Drink Water

flex: 5 Expanding Cards